<template>
  <div>
    <mt-popup v-model="popupReciverVisible" position="right" :modal="false" style="width:100%;height:100%">
      <div class="page receiver-info">
        <div class="scroll-view">
          <customHeader middleTitle="收货人信息" @leftCallBack="handleBack" :jsBridgeBack="false">
          </customHeader>
          <div class="page-body">
            <ul class="form-style form-style-top">
              <li>
                <span class="required">收件人</span>
                <div>
                  <inputClear @blur="fieldValidate('receiveName')" v-model="data['receiveName']" placeholder="请输入真实姓名" :max="20" :maxlength="20"></inputClear>
                </div>
              </li>
              <li>
                <span class="required">手机号</span>
                <div>
                  <inputClear type="tel" @blur="fieldValidate('receiveMobile')" v-model="data['receiveMobile']" placeholder="收件人手机号" :max="11" :maxlength="11"></inputClear>
                </div>
              </li>
              <li class="area">
                <span class="required">地区</span>
                <div class="select-btn" @click="show('address')">
                  <div>{{defaultVal?data.fullarea:"请选择"}}</div>
                </div>
                <i class="zhk-list_rarrow"></i>
              </li>
              <li>
                <span class="required">详细地址</span>
                <div>
                  <textarea @blur="fieldValidate('detailAddress')" v-model="data['detailAddress']" placeholder="如街道，门牌号等" :max="100" :maxlength="100"></textarea>
                </div>
              </li>
            </ul>
            <div class="btn-wrap">
              <div class="btn submit" @click="sureBtn">确定</div>
            </div>
          </div>
        </div>
      </div>
    </mt-popup>
    <citys-picker :city="dataArea" :init-value="defaultVal" @confirm="confirm" ref="citys"></citys-picker>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import { Toast, MessageBox, Popup } from "mint-ui";
Vue.component(Popup.name, Popup);

import CitysPicker from "vue-citys-picker";

require("vue-citys-picker/dist/vue-citys-picker.css");

export default {
  name: "receiverInfo",
  data() {
    return {
      CommonUtil: CommonUtil,
      data: {
        receiveName: "",
        receiveMobile: "",
        detailAddress: "",
        fullarea: ""
      },
      dataArea: JSON.parse(JSON.stringify(addressUtility.getAreaList())),
      defaultVal: "",
      popupReciverVisible: false,
      inputValue: ""
    };
  },
  methods: {
    popupShow() {
      this.popupReciverVisible = true;
    },
    popupHide() {
      this.popupReciverVisible = false;
    },
    confirm(values) {
      this.defaultVal = values;
      this.data.fullarea = values[0].name + "-" + values[1].name + "-" + values[2].name;
    },
    show(citys) {
      this.$refs["citys"].open();
    },
    handleBack() {
      setTimeout(() => {
        this.inputValue && this.inputValue.close && this.inputValue.close();
      }, 100);
      this.popupHide();
    },
    // 特殊字符
    isNomalLetter(value) {
      let result = false;
      const test = /^[\u4e00-\u9fffa-zA-Z0-9]+$/;
      if (value && !test.test(value)) {
        result = false;
      } else {
        result = true;
      }
      return result;
    },
    //字段校验
    fieldValidate(fieldName, isSubmit) {
      // setTimeout(()=>{
      this.inputValue && this.inputValue.close && this.inputValue.close();
      // },100);
      let isValidate = true;
      //收件人姓名
      if (fieldName === "receiveName" || isSubmit === true) {
        const receiveName = this.data["receiveName"];
        // this.data["receiveName"] = this.data["receiveName"].substr(0, 20);
        if (CommonUtil.isEmpty(receiveName)) {
          isValidate = false;
          this.inputValue = Toast("请输入联系人姓名");
          return isValidate;
        }
        //  else if (!this.isNomalLetter(fieldValue)) {
        //   isValidate = false;
        //   Toast("收件人姓名不允许包含特殊字符");
        //   return isValidate;
        // }
      }
      //手机号
      if (fieldName === "receiveMobile" || isSubmit === true) {
        const receiveMobile = this.data["receiveMobile"];
        // this.data["receiveMobile"] = this.data["receiveMobile"].substr(0, 11);
        if (CommonUtil.isEmpty(receiveMobile)) {
          isValidate = false;
          this.inputValue = Toast("请输入手机号");
          return isValidate;
        } else if (!CommonUtil.checkMobile(receiveMobile)) {
          isValidate = false;
          this.inputValue = Toast("请输入有效的手机号");
          return isValidate;
        }
      }
      //省市区
      if (isSubmit === true) {
        if (!this.data.fullarea) {
          isValidate = false;
          this.inputValue = Toast("请选择地区");
          return isValidate;
        }
      }
      //详细地址
      if (fieldName === "detailAddress" || isSubmit === true) {
        const fieldValue = this.data["detailAddress"];
        // this.data["detailAddress"] = this.data["detailAddress"].substr(0, 100);
        if (CommonUtil.isEmpty(fieldValue)) {
          isValidate = false;
          this.inputValue = Toast("请输入详细地址");
          return isValidate;
        }
      }
      return isValidate;
    },
    // 提交收件人信息
    sureBtn() {
      if (!this.fieldValidate(null, true)) {
        return;
      } else {
        this.$emit("getReceiveInfo", { linkman: this.data.receiveName, mobile: this.data.receiveMobile, defaultVal: this.defaultVal, address: this.data.detailAddress });
        this.popupHide();
      }
    }
  },
  components: {
    customHeader,
    inputClear,
    CitysPicker
  }
};
</script>
<style lang='scss' scoped>
@import "mall";
</style>
